<!--底部按钮，点击弹出或隐藏窗口 -->
<template>
  <div class="foot-btn" :style="{bottom:btnBottom}" @click="closeBottomBox">
    <Icon v-if="display===true" type="ios-arrow-down" />
    <Icon v-if="display===false" type="ios-arrow-up" />
  </div>
</template>

<script>
export default {
  props:{
    boxHeight:{  //盒子高度
      type: String,
      default:'0px'
    },
    boxWidth: { //盒子宽度
      type: String,
      default: '0px'
    },
    display:{
      type: Boolean,
      default: false
    }
  },
  watch:{
    display(){
      if (this.display===true){
        this.btnBottom=this.boxHeight;
      }else{
        this.btnBottom='0px';
      }
    }
  },
  data(){
    return{
      btnBottom:'0px',
      //display:true,
      icon: 'ios-arrow-up',
    }
  },
  methods:{
    closeBottomBox(){

      this.$emit('click', !this.display);
    }
  }

}
</script>
<style lang="less" scoped>
.foot-btn{
  display: flex;
  flex-flow: column;
  justify-content: center;

  position: absolute;
  bottom: 0px;
  width: 50px;
  height: 25px;
  left:50%;
  padding: 0 10px;
  //transform: translateY(-50%); //加了这向上弹起 bottom不作用了
  background-color: rgb(25, 49, 122);
  z-index: 9;
  cursor: pointer;
  color: #ffffff;
}
.foot-btn::before {
  left: -65px;
  /** rgba（） 带透明度，rgb()不带透明度 */
  /*border-right-color: rgba(25, 49, 122, 0.8) !important;*/
  border-right-color: rgb(25, 49, 122) !important;
  border-right-width: 40px !important;
}
.foot-btn::after {
  right: -65px;
  /*border-left-color: rgba(25, 49, 122, 0.8) !important;*/
  border-left-color: rgb(25, 49, 122) !important;
  border-left-width: 40px !important;
}
.foot-btn::before, .foot-btn::after {
  display: block;
  content: '';
  width: 0;
  height: 0;
  border: 25px solid transparent;
  position: absolute;
  bottom: -25px;
  pointer-events: none;
  box-sizing: border-box;
}
</style>
